<template>
	<view>
		<view style="padding-bottom: 40rpx">
			<view class="userinfo" @click="personalInfo">
				<view>
					<view class="userName" style="">{{ userInfo.nickname? userInfo.nickname : userInfo.username ? userInfo.username:'' }}
					</view>
					<view class="userinfo-text" style="color: #999999">{{ $t('General.mine.viewAndEditProfile') }}</view>
				</view>
				<view class="headImg">
					<image mode="widthFix" :src="userInfo.headPortrait?userInfo.headPortrait:defaultUrl" calss="" style=""></image>
				</view>
			</view>
			<j-cell-group>
				<j-cell color="#FF0025" :title="$t('General.family.homeManagement')" to="/jvss/pagesDevice/group/group-list/group-list">
					<view class="cell-icons" slot="icon">
						<image src="https://statics.xmcsrv.net/weixin/Telkomsel/mine-group.png" class="icon"></image>
					</view>
				</j-cell>
				<j-cell v-if="false" color="#FF0025" title="设备事件" to="/jvss/pagesDevice/device/device-live/door-lock/cloudMsg?type=2">
					<view class="cell-icons" slot="icon">
						<image src="https://statics.xmcsrv.net/weixin/mine/mine-msg.png" class="icon"></image>
					</view>
				</j-cell>
			</j-cell-group>
			<j-cell-group>
				<j-cell color="#FF0025" :title="$t('General.mine.settings')" to="/jvss/pagesMine/setting/setting">
					<view class="cell-icons" slot="icon">
						<image src="https://statics.xmcsrv.net/weixin/Telkomsel/mine-setting.png" class="icon"></image>
					</view>
				</j-cell>
				<j-cell v-if="false" color="#FF0025" title="消息推送" to="/jvss/pagesMine/msgPush/msgPush">
					<view class="cell-icons" slot="icon">
						<image src="https://statics.xmcsrv.net/weixin/mine/mine-suscribe.png" class="icon"></image>
					</view>
				</j-cell>
				<j-cell v-if="false" color="#FF0025" :more="false" style="position: relative;">
					<view class="cell-icons" slot="icon">
						<image src="https://statics.xmcsrv.net/weixin/mine/mine-log.png" class="icon"></image>
					</view>
					<button slot="title" open-type="feedback" class="feedbackBtn">上传日志
					<view class="more u-f-ajc">
						<view class="cell-arrow"></view>
					</view>
					</button>
				</j-cell>
				<j-cell color="#FF0025" :title="$t('General.mine.about')" to="/jvss/pagesMine/about/about">
					<view class="cell-icons" slot="icon">
						<image src="https://statics.xmcsrv.net/weixin/Telkomsel/mine-about.png" class="icon"></image>
					</view>
				</j-cell>
			</j-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: uni.getStorageSync('isWeixinLogin') ? true : false,
				userInfo: {},
				defaultUrl: 'https://statics.xmcsrv.net/weixin/custom/ThomeLogo.png',
			};
		},
		onShow: function() {
            uni.setNavigationBarTitle({
                title: this.$t('General.mine.my')
            })
			uni.showTabBar()
			this.userInfo = uni.getStorageSync('userInfo');
			if(typeof this.userInfo!='object'){
				uni.reLaunch({
					url: '/jvss/pages/login/login'
				})
			}
		},
		onLoad() {
			getApp().globalData.api.getUserinfo2((result) => {
				let userInfo = JSON.parse(decodeURIComponent(result.data.replace(/\+/g, '%20'))).data;
				console.log(userInfo, '用户信息')
				uni.setStorageSync('userInfo', userInfo);
				if (userInfo.nickname || userInfo.username) {
					this.userInfo = userInfo
				}
			})
		},
		methods: {
			personalInfo() {
				uni.navigateTo({
					url: '/jvss/pagesMine/personal/personal'
				})
			},
			//测试推流
			testPushLive() {
				uni.navigateTo({
					url: '/jvss/pagesDevice/testlive/testlive'
				})
			},
			
		}
	};
</script>
<style lang="scss">
	.userinfo {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		.headImg{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			overflow: hidden;
		}

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.userinfo-text {
		font-size: 22rpx;
	}

	.userName {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		width: calc(100vw - 200rpx);
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.userinfo-avatar {
		overflow: hidden;
		margin: 20rpx;
	}
	.icon{
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
	}
	.feedbackBtn{
		width: calc(100vw - 130rpx);
		height: 50rpx;
		border: none !important;
		background-color: transparent;
		text-align: left;
		padding-left: 0rpx;
		font-size: 30rpx;
		margin-left: -5rpx !important;
		display: flex;
		align-items: center;
	}
	button:after{
		border: none;
	}
	.more{
		text-align: right;
		position: absolute;
		right: 0;
		top: 0;
		width: 22rpx;
		height: 60rpx;
		padding: 0 15rpx;
	}
	.cell-arrow {
	    width: 10rpx;
	    height: 10rpx;
	    border-width: 2rpx;
	    border-style: solid;
	    border-color: #666666;
	    border-left-color: transparent;
	    border-bottom-color: transparent;
	    transform: rotate(45deg);
	}
</style>
